<template>
  <div class="average-view bg-c-base">
    <div class="left">
      <div class="title">实时订单趋势图</div>
      <div class="sub-title">Number Of Real-time Orders</div>
      <div class="total">
        <count-to-hy :end-val="order.growth" suffix="" :decimals="0" />
      </div>
      <div class="tiny-title">周同比增长率</div>
      <div class="percent-text">
        <span class="percent-text-1">
          <count-to-hy :end-val="order.growthRate" />
        </span>
      </div>
    </div>
    <div class="right">
      <v-chart :options="options" ref="chart"></v-chart>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, getCurrentInstance, watch } from 'vue';
import mock from '@/hooks/mock';
export default {
	name : 'Order',
	setup () {
		let { order } = reactive(mock());
		const options = reactive({
			xAxis : {
				type : 'category',
				boundaryGap : false,
				data : order.date,
				axisLine : {
					lineStyle : {
						color : 'rgba(200, 200, 200)',
					},
				},
				axisLabel : {
					fontSize : 16,
				},
			},
			yAxis : {
				type : 'value',
				splitLine : {
					lineStyle : {
						color : 'rgb(50, 50, 50)',
					},
				},
				axisLine : {
					lineStyle : {
						color : 'rgba(200, 200, 200)',
					},
				},
				axisLabel : {
					fontSize : 16,
				},
			},
			dataZoom : [
				{
					type : 'inside',
					start : 0,
					end : 100,
				},
				{
					start : 0,
					end : 100,
					handleIcon :
            'M 0.0525 0.5656 L 0.0525 0 L -0.0583 0 L -0.0583 0.5656 L -0.2449 0.5656 L -0.2449 1.4344 L -0.0525 1.4344 L -0.0525 2 L 0.0525 2 L 0.0525 1.4344 L 0.2449 1.4344 L 0.2449 0.5656 L 0.0525 0.5656 Z M 0.1399 1.1953 L -0.1458 1.1953 L -0.1458 1.1137 L 0.1399 1.1137 L 0.1399 1.1953 Z M 0.1399 0.8863 L -0.1458 0.8863 L -0.1458 0.8047 L 0.1399 0.8047 L 0.1399 0.8863 Z',
					handleSize : '100%',
					handleStyle : {
						color : '#a7b7cc',
					},
					textStyle : {
						color : 'rgb(200, 200, 200)',
					},
					fillerColor : 'rgba(120,126,134,.3)',
					dataBackground : {
						lineStyle : {
							color : 'grey',
						},
						areaStyle : {
							color : 'gray',
						},
					},
					borderColor : 'rgb(200, 200, 200)',
				},
			],
			series : [
				{
					name : '模拟数据',
					type : 'line',
					smooth : true,
					symbol : 'none',
					sampling : 'average',
					itemStyle : {
						color : '#c5fb79',
					},
					data : order.data,
				},
			],
			grid : {
				top : 40,
				bottom : 80,
				right : 40,
				left : 80,
			},
		});
		onMounted(() => {
			let dom = getCurrentInstance().ctx.$refs['chart'];
			watch(
				() => order.growth,
				() => {
					dom.init();
				}
			);
		});

		return {
			options,
			order,
		};
	},
};
</script>

<style lang="scss" scoped>
.average-view {
  display: flex;
  height: 350px;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 320px;
    width: 320px;
    padding-left: 40px;
    box-sizing: border-box;

    .title {
      font-size: 32px;
    }

    .sub-title {
      font-size: 16px;
      letter-spacing: 1px;
      margin-top: 10px;
    }

    .total {
      font-family: DIN;
      font-size: 68px;
      font-weight: bolder;
      letter-spacing: 2px;
      padding: 10px 0;
    }

    .tiny-title {
      font-size: 18px;
      color: #fff;
      line-height: 36px;
    }

    .percent-text {
      font-size: 28px;
      font-family: DIN;
      letter-spacing: 2px;

      .percent-text-1 {
        color: rgb(197, 251, 121);
        font-weight: bolder;
      }
    }
  }

  .right {
    width: 1587px;
    height: 340px;
  }
}
</style>
